<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <script src="ut/lib/canteen.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
    body {
        background: #333;
    }

    .chart {
        height: 400px;
    }
</style>
<div class="chart" id="main1"></div>
<div class="chart" id="main2"></div>
<div class="chart" id="main3"></div>
<div class="chart" id="main4"></div>


<script>

    require([
        'echarts'
        // 'zrender/tool/color',
        // 'echarts/chart/line',
        // 'echarts/chart/parallel',
        // 'echarts/component/title',
        // 'echarts/component/grid',
        // 'echarts/component/legend',
        // 'echarts/component/tooltip',
        // 'echarts/component/toolbox',
        // 'echarts/component/visualMap'
    ], function (echarts) {
        var el = document.getElementById('main1');
        if (!el) {
            return;
        }
        var chart = echarts.init(el);

        var DECIMALS = [1];
        for (var i = 1; i < 15; i++) {
            DECIMALS.push(DECIMALS[DECIMALS.length - 1] * 10);
        }

        window.yAxisLabelFormatter = (function () {
            var labelMap = {};

            return function (val, index) {
                !index && (labelMap = {});

                if (val < 0) {
                    return '';
                }

                var label = val >= DECIMALS[11]
                    ? fix((val / DECIMALS[12]).toFixed(val >= DECIMALS[13] ? 0 : 1)) + 'T'
                    : val >= DECIMALS[8]
                        ? fix((val / DECIMALS[9]).toFixed(val >= DECIMALS[10] ? 0 : 1)) + 'B'
                        : val >= DECIMALS[5]
                            ? fix((val / DECIMALS[6]).toFixed(val >= DECIMALS[7] ? 0 : 1)) + 'M'
                            : val >= DECIMALS[3]
                                ? fix((val / DECIMALS[3]).toFixed(val >= DECIMALS[4] ? 0 : 1)) + 'K'
                                : val;

                return (
                    labelMap[label]
                        ? ''
                        : (labelMap[label] = true, label)
                ) + '\n';

                function fix(valStr) {
                    return valStr.replace(/[.]0+$/, '');
                }
            };
        })();

        window.smallYAxisLabel = {
            show: true,
            margin: 2,
            formatter: window.yAxisLabelFormatter,
            inside: true,
            textStyle: {
                // color: '#f7e1a9',
                color: 'rgba(255,255,255,0.3)',
                fontSize: 9,
                fontFamily: 'STHeiti'
            }
        };


        option = {
            backgroundColor: '#eee',
            title: {
                text: '上两个 label 显示不出来怎么办'
            },
            grid: {
                backgroundColor: '#333',
                show: true,
                borderWidth: 0,
                height: 156,
                top: '15%',
                left: 100,
                right: 100
            },
            xAxis: {
                type: 'time'
            },

            tooltip: {
                trigger: 'axis'
            },

            yAxis: {
                type: 'value',
                scale: true,
                boundaryGap: ['3%', '3%'],
                splitNumber: 3,
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#9f520e'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: window.smallYAxisLabel
            },
            easing: 'linear',
            series: [{
                name: '视频制作总数',
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#f9bb0b'
                    }
                },
                showSymbol: false,
                data: [{"name": "980061360000", "value": [980061360000, 1519]}, {
                    "name": "980061420000",
                    "value": [980061420000, 1526]
                }, {"name": "980061480000", "value": [980061480000, 1530]}, {
                    "name": "980061540000",
                    "value": [980061540000, 1531]
                }, {"name": "980061600000", "value": [980061600000, 1531]}, {
                    "name": "980061660000",
                    "value": [980061660000, 1532]
                }, {"name": "980061720000", "value": [980061720000, 1532]}, {
                    "name": "980061780000",
                    "value": [980061780000, 1533]
                }, {"name": "980061840000", "value": [980061840000, 1533]}, {
                    "name": "980061900000",
                    "value": [980061900000, 1537]
                }, {"name": "980061960000", "value": [980061960000, 1537]}, {
                    "name": "980062020000",
                    "value": [980062020000, 1539]
                }, {"name": "980062080000", "value": [980062080000, 1552]}, {
                    "name": "980062140000",
                    "value": [980062140000, 1552]
                }, {"name": "980062200000", "value": [980062200000, 1559]}, {
                    "name": "980062260000",
                    "value": [980062260000, 1561]
                }, {"name": "980062320000", "value": [980062320000, 1562]}, {
                    "name": "980062380000",
                    "value": [980062380000, 1562]
                }, {"name": "980062440000", "value": [980062440000, 1562]}, {
                    "name": "980062500000",
                    "value": [980062500000, 1563]
                }, {"name": "980062560000", "value": [980062560000, 1563]}, {
                    "name": "980062620000",
                    "value": [980062620000, 1565]
                }, {"name": "980062680000", "value": [980062680000, 1569]}, {
                    "name": "980062740000",
                    "value": [980062740000, 1575]
                }, {"name": "980062800000", "value": [980062800000, 1579]}, {
                    "name": "980062860000",
                    "value": [980062860000, 1579]
                }, {"name": "980062920000", "value": [980062920000, 1581]}, {
                    "name": "980062980000",
                    "value": [980062980000, 1582]
                }, {"name": "980063040000", "value": [980063040000, 1585]}, {
                    "name": "980063100000",
                    "value": [980063100000, 1589]
                }, {"name": "980063160000", "value": [980063160000, 1590]}, {
                    "name": "980063220000",
                    "value": [980063220000, 1590]
                }, {"name": "980063280000", "value": [980063280000, 1591]}, {
                    "name": "980063340000",
                    "value": [980063340000, 1591]
                }, {"name": "980063400000", "value": [980063400000, 1592]}, {
                    "name": "980063460000",
                    "value": [980063460000, 1592]
                }, {"name": "980063520000", "value": [980063520000, 1593]}, {
                    "name": "980063580000",
                    "value": [980063580000, 1605]
                }, {"name": "980063640000", "value": [980063640000, 1609]}, {
                    "name": "980063700000",
                    "value": [980063700000, 1612]
                }, {"name": "980063760000", "value": [980063760000, 1614]}, {
                    "name": "980063820000",
                    "value": [980063820000, 1614]
                }, {"name": "980063880000", "value": [980063880000, 1617]}, {
                    "name": "980063940000",
                    "value": [980063940000, 1617]
                }, {"name": "980064000000", "value": [980064000000, 1619]}, {
                    "name": "980064060000",
                    "value": [980064060000, 1622]
                }, {"name": "980064120000", "value": [980064120000, 1622]}, {
                    "name": "980064180000",
                    "value": [980064180000, 1624]
                }, {"name": "980064240000", "value": [980064240000, 1627]}, {
                    "name": "980064300000",
                    "value": [980064300000, 1640]
                }, {"name": "980064360000", "value": [980064360000, 1642]}, {
                    "name": "980064420000",
                    "value": [980064420000, 1642]
                }, {"name": "980064480000", "value": [980064480000, 1643]}, {
                    "name": "980064540000",
                    "value": [980064540000, 1644]
                }, {"name": "980064600000", "value": [980064600000, 1644]}, {
                    "name": "980064660000",
                    "value": [980064660000, 1647]
                }, {"name": "980064720000", "value": [980064720000, 1647]}, {
                    "name": "980064780000",
                    "value": [980064780000, 1648]
                }, {"name": "980064840000", "value": [980064840000, 1648]}, {
                    "name": "980064900000",
                    "value": [980064900000, 1648]
                }]
            }]
        };

        chart.setOption(option);
    });

</script>


<script>

    require([
        'echarts'
    ], function (echarts) {
        var el = document.getElementById('main2');
        if (!el) {
            return;
        }
        var chart = echarts.init(el);
        var rotate = 30;

        option = {
            backgroundColor: '#eee',
            title: {
                text: 'grid.containLabel'
            },
            grid: {
                containLabel: true,
                left: 0
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: ['aaaaaa', 'bbbbbb', 'cccccc', 'ddddd', 'eeeee'],
                axisLabel: {
                    rotate: rotate
                }
            },
            yAxis: {
                axisLabel: {
                    rotate: rotate
                }
            },
            series: [{
                type: 'line',
                data: [
                    1111111111111,
                    2222222222222,
                    3333333333333,
                    4444444444444,
                    5555555555555,
                    6666666666666
                ]
            }]
        };

        chart.setOption(option);

        setInterval(function () {
            rotate = (rotate + 1) % 360;

            chart.setOption({
                yAxis: {
                    axisLabel: {
                        rotate: rotate
                    }
                },
                xAxis: {
                    axisLabel: {
                        rotate: rotate - 180
                    }
                }
            });
        }, 100);
    });

</script>


<script>

    require([
        'echarts'
    ], function (echarts) {
        var el = document.getElementById('main3');
        if (!el) {
            return;
        }
        var chart = echarts.init(el);
        var rotate = 30;

        option = {
            backgroundColor: '#eee',
            title: {
                text: 'axisLable.formatter: {value} should be correct'
            },
            grid: {
                containLabel: true,
                left: 0
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: ['categoryA', 'categoryB', 'categoryC', 'categoryD', 'categoryE'],
                axisLabel: {
                    formatter: '{value}'
                }
            },
            yAxis: {
                axisLabel: {
                    formatter: '{value}',
                    rotate: rotate
                }
            },
            series: [{
                type: 'line',
                data: [
                    1111111111111,
                    2222222222222,
                    3333333333333,
                    4444444444444,
                    5555555555555,
                    6666666666666
                ]
            }]
        };

        chart.setOption(option);
    });

</script>


<script>

    var chart;
    var myChart;
    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        var option = {
            backgroundColor: '#eee',
            "xAxis": {
                "type": "category",
                "data": [
                    "2018-10-08",
                    "2018-10-09"
                ]
            },
            "yAxis": {
                "type": "value",
                "axisLabel": {
                    "color": "red",
                    formatter: function (value, index) {
                        if (index === 0) {
                            // Used to make yAxis label not show (a bug).
                            return '';
                        } else {
                            return value + '';
                        }
                    }
                },
                splitLine: {
                    show: false
                },
                "z": 3
            },
            animation: false,
            "tooltip": {
                "trigger": "axis"
            },
            "series": [
                {
                    "type": "line",
                    "data": [
                        1231212,
                        32341323
                    ]
                }
            ]
        }

        testHelper.create(echarts, 'main4', {
            title: 'Label of yAxis should be RED, but 0 label does not display',
            option: option,
            recordCanvas: true
        });
    });

</script>


</body>
</html>
